<!--  -->
<template>
  <div class="login-container">
    <!-- 头部 -->
    <van-nav-bar
      title="手机号+短信验证码登录"
      fixed
      :z-index="100"
      @click-left="onBack"
    >
      <template #left>
        <van-icon name="arrow-left" size="20" color="#fff" />
      </template>
    </van-nav-bar>
    <div class="content">
      <div class="form-wrapper">
        <div class="user-tel">
          <input
            type="tel"
            placeholder="请输入手机号"
            v-model="userTel"
            maxlength="11"
          />
        </div>
        <div class="user-pwd">
          <input
            type="password"
            placeholder="请输入短信验证码"
            v-model="userPwd"
            maxlength="4"
          />
          <div class="unsend-btn" v-if="!isSendCode" @click="sendVerifyCode">
            发送验证码
          </div>
          <div class="send-btn" v-else @click="sendVerifyCode">
            重新发送(<span>{{ restTime }}</span
            >)
          </div>
        </div>
        <div class="login-btn" @click="toLogin">登录</div>
        <div class="relevant-links">
          <div @click="pwdLogin">
            <van-icon name="lock" size="16" />
            <span>密码登录</span>
          </div>
          <div @click="resetPass">
            <van-icon name="lock" size="16" />
            <span>找回密码</span>
          </div>
          <div @click="toRegister">
            <van-icon name="lock" size="16" />
            <span>快速注册</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { NavBar, Icon, Toast } from "vant";
import { sendVerifyCode, verifyCodeLogin } from "@/network/back/api";
import {mapMutations} from "vuex";
export default {
  data() {
    return {
      //电话号码
      userTel: "",
      //登录密码
      userPwd: "",
      //校验规则
      rules: {
        userTel: {
          reg: /^1[35789]\d{9}$/,
          toast: "请输入11位合法的手机号",
        },
        userPwd: {
          reg: /^\d{4}$/,
          toast: "验证码必须是四位数字",
        },
      },
      //是否发送验证码
      isSendCode: false,
      //倒计时
      restTime: 10,
      //倒计时定时器
      timer: null,
      //发到手机上的随机验证码
      verifyCode: "",
    };
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {},
  methods: {
    ...mapMutations(['saveUserInfo']),
    //返回上一页
    onBack() {
      this.$router.back();
    },
    //去注册页面
    toRegister() {
      this.$router.push({ name: "Register" });
    },
    //去密码登录页面
    pwdLogin() {
      this.$router.push({ name: "PwdLogin" });
    },
    //去重置密码页面
    resetPass() {
      this.$router.push({ name: "ResetPass" });
    },
    //校验规则
    validate(field) {
      if (!this.rules[field].reg.test(this[field])) {
        this.$toast(this.rules[field].toast);
        return false;
      } else {
        return true;
      }
    },
    //点击发送验证码按钮
    sendVerifyCode() {
      if (this.validate("userTel")) {
        if (!this.isSendCode) {
          this.isSendCode = true;
          //开始倒计时
          this.timer = setInterval(() => {
            this.restTime--;
            if (this.restTime < 0) {
              this.restTime = 10;
              clearInterval(this.timer);
              this.isSendCode = false;
            }
          }, 1000);
          //发送验证码
          this.sendAuthCode();
        }
      }
    },
    //发送验证码(向服务器发送短信)
    async sendAuthCode() {
      try {
        const res = await sendVerifyCode({
          url: "/sendVerifyCode",
          method: "POST",
          data: {
            telephone: this.userTel,
          },
        });
        if (res.data) {
          this.verifyCode = res.data;
        }
      } catch (err) {
        console.log(err);
      }
    },
    //去登录
    toLogin() {
      if (this.validate("userTel") && this.validate("userPwd")) {
        if (this.verifyCode && this.verifyCode == this.userPwd) {
          this.vefifyCodeLogin();
        } else {
          this.$toast("验证码不对");
        }
      }
    },
    //短信验证码登录
    async vefifyCodeLogin() {
      try {
        const res = await verifyCodeLogin({
          url: "/verifyCodeLogin",
          method: "POST",
          data: {
            telephone: this.userTel,
          },
        });
        //获取登录信息
        if(res.data && res.data.token){
           this.saveUserInfo(res.data); 
        }
        this.$toast(res.message);
      } catch (err) {
        console.log(err);
      }
    },
  },
  components: {
    [NavBar.name]: NavBar,
    [Icon.name]: Icon,
    [Toast.name]: Toast,
  },
};
</script>
<style scoped>
/* @import url(); 引入css类 */
.login-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f5f5f5;
}
.login-container >>> .van-nav-bar__content {
  background-color: #b64f4a;
}
.login-container >>> .van-nav-bar__title {
  color: #fff;
}
.content {
  flex: 1;
  padding-top: 46px;
}
.form-wrapper {
  padding: 20px;
}
.user-tel,
.user-pwd {
  display: flex;
  align-items: center;
  height: 44px;
  background-color: #fff;
  margin-bottom: 20px;
  border: 1px solid #ccc;
}
.user-pwd input {
  flex: 1;
}
.user-pwd .unsend-btn {
  width: 112px;
  height: 100%;
  color: #fff;
  text-align: center;
  line-height: 44px;
  background-color: #b0352f;
}
.user-pwd .send-btn {
  width: 112px;
  height: 100%;
  color: #ccc;
  text-align: center;
  line-height: 44px;
  background-color: #eee;
}
.user-pwd .send-btn span {
  color: #b0352f;
  font-weight: bold;
}
.form-wrapper input {
  font-size: 14px;
  padding-left: 10px;
}
.form-wrapper .login-btn {
  height: 44px;
  margin-bottom: 20px;
  color: #fff;
  text-align: center;
  line-height: 44px;
  background-color: #b0352f;
}
.relevant-links {
  display: flex;
  font-size: 14px;
}
.relevant-links > div {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
}
.relevant-links > div span {
  margin-left: 4px;
}
</style>